<template>
	<view>
		<view class="item">
			<view class="pic">
				<image :src="item.imageUrl" mode="scaleToFill"></image>
			</view>
			<view class="content">
				<view class="title">{{item.name}}</view>
				<!-- <view class="info" v-if="!item.lookTime">
					<text class="author">{{item.createBy}}</text> -->
				<!-- <text class="looked">{{item.hits}}浏览</text> -->
				<!-- </view> -->
				<view class="miaosu"> {{item.description||item.helper}}</view>
				<view class="info">
					<text>类型:{{item.type}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "remindComponents",
		props: {
			item: {
				type: Object,
				default () {
					return {
						name: "运动",
						type: "默认"
					}
				}
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		display: flex;
		// border-bottom: 1rpx solid #efefef;
		border-radius: 0% 2% 2% 0%;
		box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
		border: 1px solid #efefef;

		.pic {
			width: 240rpx;
			height: 160rpx;

			image {
				height: 100%;
				width: 100%;
			}
		}

		.content {
			flex: 1;
			padding-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.miaosu {
				padding-left: 2%;
				font-size: 24rpx;
				color: #333;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden; //溢出内容隐藏
				text-overflow: ellipsis; //文本溢出部分用省略号表示
				display: -webkit-box; //特别显示模式
				-webkit-line-clamp: 2; //行数
				line-clamp: 2;
				-webkit-box-orient: vertical; //盒子中内容竖直排列			
			}

			.info {
				font-size: 26rpx;
				color: #999;

				text {
					padding-right: 30rpx;
				}
			}
		}
	}
</style>